<template>
  <div>
    <ul class="template-list infinite-list-wrapper" style="overflow: auto">
      <li
        class="card template-item template-add"
        style="text-align: center"
        @click="addLowCode"
      >
        <div>新增</div>
        <i class="el-icon-plus" />
      </li>
      <li
        v-for="(item, index) in tableData"
        :key="item.id"
        class="card template-item"
        :class="{ 'active-item': activeIndex === index }"
        @mouseenter="onMouseenter(index)"
        @mouseleave="onMouseenter(-1)"
      >
        <div v-if="activeId === item.id" class="item-active">使用中</div>
        <div>{{ item.title }}</div>
        <el-image :src="item.shotCover">
          <div slot="error">
            <div class="shot-cover-error">
              <div class="shot-cover-error-text">暂无封面</div>
            </div>
          </div>
        </el-image>
        <div v-if="activeIndex === index" class="hover-active">
          <div
            class="hover-active-text hover-active-edit"
            @click="handleUserThis(item)"
          >
            设为使用
          </div>
          <div
            class="hover-active-text hover-active-edit"
            @click="editLowCode(item)"
          >
            编辑
          </div>
          <div
            class="hover-active-text hover-active-del"
            @click="handleDel(item)"
          >
            删除
          </div>
        </div>
      </li>
      <p v-if="loading">加载中...</p>
      <p v-if="noMore">没有更多了</p>
    </ul>
  </div>
</template>

<script>
import { lowCodePageList, updateStatus } from "../../../../api/marketing";
import {
  INDENTIFICATION,
  OPERATION_TYPE,
  PAGE_SIGN,
  PAGE_TYPE,
} from "@/views/wxaNewBuildModule/config";
import { getWxaConfig } from "@/views/wxaBuildModule/api/config";
import {
  editWxaConfig,
  getWxaEntrance,
} from "@/views/wxaNewBuildModule/api/config";
import { getPageUrl } from "@/utils/format";
import { editPageConfig } from "@/views/wxaNewBuildModule/api/page";
export default {
  name: "Index",
  data() {
    return {
      pageSign: "PUB_USER_CENTER",
      activeIndex: -1,
      activeId: 0,
      tableData: [],
      loading: false,
      noMore: false,
      /* 分页 */
      paginationConfig: {
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10, // 每页条数-默认10
        pageType: PAGE_TYPE.USER_CENTER_MODAL,
      },
      entranceRow: {},
    };
  },
  created() {
    this.init();
    this.getConfig();
  },
  methods: {
    async getConfig() {
      const {
        code,
        data: { tabBarList, id },
      } = await getWxaConfig({ classifyCode: "DEFAULT" });
      if (code === 0) {
        this.tabBarId = id;
        this.tabBarList = tabBarList;
        tabBarList.map((t, i) => {
          const params = JSON.parse(t.openInsideParams);
          if (params.commonCode === this.pageSign) {
            this.pageParamsIndex = i;
            this.activeId = params.pageId;
          }
        });
      }
      const { code: EntranceCode, data: EntranceData } = await getWxaEntrance({
        type: 2,
        status: 1,
      });
      if (EntranceData.length > 0) {
        this.isHasHomePageCode =
          EntranceData.filter((v) => v.code === this.pageSign).length > 0;
        this.entranceRow = EntranceData.filter(
          (v) => v.code === this.pageSign
        )[0];
      }
      console.log("微信配置", EntranceData, EntranceCode);
    },
    init() {
      lowCodePageList(this.paginationConfig)
        .then((res) => {
          res.data.list.map((item) => {
            const page = JSON.parse(item.pageJson);
            item.shotCover = page.attribute.shotCover;
            return item;
          });
          this.tableData = res.data.list;
          this.paginationConfig.total = res.data.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    reset() {
      this.paginationConfig.page = 1;
      this.paginationConfig.pageSize = 10;
      this.init();
    },
    onMouseenter(index) {
      this.activeIndex = index;
    },
    load() {
      this.loading = true;
      setTimeout(() => {
        this.count += 10;
        this.loading = false;
      }, 2000);
    },
    addLowCode() {
      const params = {
        page_id: 0,
        sign: INDENTIFICATION.USER_CENTER_MODAL,
        op: OPERATION_TYPE.ADD,
        from: PAGE_SIGN.USER_PAGE,
      };
      this.$emit("handleAddLowCode", params);
    },
    editLowCode(page) {
      const params = {
        page_id: page.id,
        sign: INDENTIFICATION.USER_CENTER_MODAL,
        op: OPERATION_TYPE.EDIT,
        from: PAGE_SIGN.USER_PAGE,
        pageJson: page.pageJson,
        status: page.status,
      };
      this.$emit("handleEditLowCode", params);
    },
    async handleDel(row) {
      const { code } = await updateStatus({
        id: row.id,
        isDelete: 1,
      });
      if (code === 0) {
        this.$message.success("删除成功");
        this.reset();
      }
    },
    async handleUserThis(row) {
      console.log("设为首页", row.id);
      // 判断有没有公域小程序公域入口的首页路径,?type=2&status=1
      if (!this.isHasHomePageCode) {
        return this.$message.error("请设置公域小程序个人中心功能入口");
      }
      // 判断有没有设置首页tabbar
      const isHasHomePage = this.pageParamsIndex > -1;
      if (!isHasHomePage) {
        return this.$message.error("请设置公域小程序个人中心导航");
      }
      // 设置公域功能入口路径
      const openPath = this.tabBarList[this.pageParamsIndex].openPath; // 源数据路径
      const pagePath = getPageUrl(openPath, { pageId: row.id });
      console.log("得到路径", pagePath);
      const { code } = await editPageConfig(
        { classifyCode: "DEFAULT" },
        {
          id: this.entranceRow.id || this.tabBarId,
          enTranceType: 2,
          pubDomainPath: pagePath,
          code: this.pageSign,
        }
      );
      // 设置tabbar路径
      const list = this.tabBarList;
      list.map((l) => {
        const insideParams = JSON.parse(l.openInsideParams);
        if (insideParams.commonCode === this.pageSign) {
          insideParams.pageId = row.id;
          l.openInsideParams = JSON.stringify(insideParams);
          l.openPath = pagePath;
        }
      });
      const res = await editWxaConfig({
        params: { classifyCode: "DEFAULT" },
        data: {
          id: this.tabBarId,
          tabBarList: list,
        },
      });
      if (code === 0 && res?.code === 0) {
        this.$message.success("设置成功");
        await this.getConfig();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.item-active {
  position: absolute;
  top: 20px;
  background-color: #888888;
  opacity: 0.5;
  transform: rotate(395deg);
  right: -10px;
  z-index: 1;
  padding: 2px 20px;
}
.card {
  width: 10rem;
  height: 16rem;
}
.shot-cover-error {
  width: 10rem;
  height: 16rem;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #03c1b680;
}
.template-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  height: 85vh;
  .template-item {
    margin-right: 0.5rem;
    margin-bottom: 1rem;
    overflow: hidden;
    position: relative;
    .el-image {
      width: 100%;
      height: 100%;
    }
    .hover-active {
      position: absolute;
      top: calc(1rem + 1px);
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      width: 100%;
      height: calc(100% - 1rem);
      &-text {
        color: white;
        text-align: center;
        padding: 10px 0;
        margin: 5px 0;
        background-color: rgba(255, 255, 255, 0.5);
        &:first-child {
          margin-top: 40%;
        }
      }
    }
  }
}
.template-add {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  border: 1px solid whitesmoke;
  .el-icon-plus {
    font-size: 10rem;
  }
}
</style>
